// ========================================================
// list 列表元素UI
// ========================================================


@mixin list() {
    display: block;
    overflow: hidden;
    color: $list-item-default-text;
    position: relative;
    margin-bottom: rem($list-margin-bottom);
    background-color: $list-item-default-bg;
    @include retina-border(top bottom, $list-item-default-border);

    &.list-inset {
        @include retina-border-width(all);
        @include retina-border-radius($list-border-radius);
    }

    &.allact .item.active,
    .item[href].active,
    .item[link].active,
    .item.canact.active {
        @if ($build-rem == true) {
            background-color: $list-item-default-active-bg;
        } @else {
            @include retina-border-width(bottom, 0);

            &:after {
                content: " ";
                position: absolute;
                z-index: -1;
                top: 0;
                height: 100%;
                left: -50%;
                width: 200%;
                background-color: $list-item-default-active-bg;
            }
        }
    }

    .item.clear.active {
        @if ($build-rem != true) {
            @include retina-border-width(bottom, 1px);

            &:after {
                display: none;
            }
        }
    }

    .item {
        display: block;
        position: relative;
        z-index: $z-index-item;

        line-height: rem($list-item-line-height);
        min-height: rem($list-item-height);

        font-size: rem($list-item-font-size);
        padding: rem($list-item-padding);
        @include retina-border(bottom, $list-item-default-border);

        &:last-child {
            @include retina-border-width(bottom, 0);
        }

        &.item-inline {
            padding: rem($list-item-padding/3) rem($list-item-padding);
            min-height: rem($list-item-padding/3 + $list-item-line-height);
            border-bottom-width: 0;
        }

        &.inline-first {
            margin-top: rem($list-item-padding/3*1.5);
        }

        &.inline-last {
            margin-bottom: rem($list-item-padding/3*1.5);
        }

        &.item-embed {
            margin-left: rem($list-item-padding);
            margin-right: rem($list-item-padding);

            padding-left: 0;
            padding-right: 0;
        }

        .icon, .icon-right {
            color: $list-item-icon-color;

            &:before {
                font-size: rem($list-item-icon-right-font-size);
                margin-top: rem($list-item-icon-fix);
            }
        }

        .label-right {
            max-width: 55%;
            @include text-ellipsis();
        }
    }
    &.list-embed {
        padding: 0 rem($list-item-padding);

        .item {
            padding: rem($list-item-padding) 0;

            &.item-inline {
                padding: rem($list-item-padding/3) 0;
            }
        }
    }
    &.list-embed-left {
        .item {
            padding-left: 0;
            margin-left: rem($list-item-padding);
        }
    }


    /*====================================================
     * item-input 相关代码
     *====================================================*/
    .item {
        &.item-input {
            padding: rem($list-item-inset-top-padding) rem($list-item-padding);

            input {
                font-size: inherit;
            }

            &.item-embed {
                padding-right: 0;
            }
        }
    }


    /*====================================================
     * item-avatar 相关代码
     *====================================================*/
    .item {
        &.item-avatar,
        &.item-avatar-large {
            .avatar {
                border-radius: $list-border-radius;
                position: absolute;
                top: rem($list-item-padding);
                left: rem($list-item-padding);
                bottom: rem($list-item-padding);

                img {
                    width: 100%;
                    height: 100%;
                }
            }

            .line {
                @include text-ellipsis();
                position: relative;

                &:first-of-type {
                    top: rem(-$list-item-avatar-fix);
                }

                &:last-of-type {
                    bottom: rem(-$list-item-avatar-fix);
                }
            }
        }

        &.item-avatar {
            min-height: rem($list-item-padding*2 + $list-item-avatar);
            padding-left: rem($list-item-padding*2 + $list-item-avatar);

            .avatar {
                width: rem($list-item-avatar);
                height: rem($list-item-avatar);
            }

            .line {
                line-height: rem($list-item-avatar/2);
            }
        }

        &.item-avatar-large {
            min-height: rem($list-item-padding*2 + $list-item-avatar-large);
            padding-left: rem($list-item-padding*2 + $list-item-avatar-large);

            .avatar {
                width: rem($list-item-avatar-large);
                height: rem($list-item-avatar-large);
            }

            .line {
                line-height: rem($list-item-avatar-large/3);
            }
        }
    }
    &.list-embed .item,
    &.list-embed-left .item,
    .item.item-embed, {
        &.item-avatar,
        &.item-avatar-large {
            .avatar {
                left: 0;
            }
        }

        &.item-avatar {
            padding-left: rem($list-item-padding + $list-item-avatar);
        }

        &.item-avatar-large {
            padding-left: rem($list-item-padding + $list-item-avatar-large);
        }
    }


    /*====================================================
     * label-left,icon-left 公用 相关代码
     *====================================================*/
    .item {
        &.label-left .label,
        &.icon-left .icon,
        &.icon-left .icon-small {
            position: absolute;
            left: rem($list-item-padding);
            top:50%;
            transform: translate(0,-50%);
        }
    }
    &.list-embed .item,
    &.list-embed-left .item,
    .item.item-embed {
        &.label-left .label,
        &.icon-left .icon,
        &.icon-left .icon-small {
            left: 0;
        }
    }


    /*====================================================
     * label-left 相关代码
     *====================================================*/
    .item {
        &.label-left {
            padding-left: rem($list-item-inset-left-padding);

            .label {
                display: block;
                width: rem($list-item-inset-left-padding - $list-item-padding);
                min-height: rem($list-item-line-height);
                line-height: rem($list-item-line-height);
            }
        }
    }


    /*====================================================
     * icon-left 相关代码
     *====================================================*/
    .item {
        &.icon-left {
            padding-left: rem($list-item-icon-padding);

            &.label-left {
                padding-left: rem($list-item-icon-label-padding);

                .label {
                    left: rem($list-item-icon-label-left);
                }
            }
        }
    }


    /*====================================================
     * icon-right,item-button-right 公用 相关代码
     *====================================================*/
    .item {
        &.icon-right .icon-right,
        &.label-right .label-right,
        &.item-button-right .button {
            position: absolute;
            right: rem($list-item-padding);
            top:50%;
            transform: translate(0,-50%);
        }
    }
    &.list-embed .item,
    .item.item-embed {
        &.icon-right .icon-right,
        &.icon-right .label-right,
        &.item-button-right .button {
            right: 0;
        }
    }


    /*====================================================
     * icon-right 相关代码
     *====================================================*/
    .item {
        &.icon-right {
            padding-right: rem($list-item-icon-right-padding);

            .icon-right:before {
                font-size: rem($list-item-icon-right-font-size);
            }
        }
    }

    /*====================================================
     * label-right 相关代码
     *====================================================*/
    .item {
        &.icon-right {
            .label-right {
                right: rem($list-item-padding + $list-item-label-right-padding);
            }

            &.item-embed .label-right {
                right: rem($list-item-label-right-padding);
                line-height: rem($list-item-line-height);
            }
        }
    }



    /*====================================================
     * item-button-right 相关代码
     *====================================================*/
    .item {
        &.item-button-right {
            padding-right: rem($list-item-inset-left-padding);

            .button {
                font-size: rem($list-item-button-font-size);
                padding: 0 rem($list-item-button-padding);
                line-height: rem($list-item-button-height);
                min-height: rem($list-item-button-height);

                &.button-clear {
                    padding: 0;
                    font-size: rem($list-item-font-size);
                }
            }
        }
    }
}
